<template>
  <uni-nav-bar title="车用尿素外卖单列表" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package" style="padding: 0px;">
    <uni-segmented-control
      :current="current"
      :values="items"
      @clickItem="onClickItem"
      styleType="text"
      activeColor="#1B91FF"
    ></uni-segmented-control>
  </view>
  <view class="center" style="justify-content: space-around;margin-bottom: 20rpx;" v-if="current === 1">
    <text v-for="(item, index) in stage" :key="index" :class="level == index ? 'active' : ''" @click="ChangeTab(index)">
      {{ item.name }}
    </text>
  </view>
  <scroll-view
    scroll-y="true"
    enable-back-to-top
    @scrolltolower="loadMore"
    class="scroll-box"
    :style="{ height: current == '1' ? mouHeight + 'px' : pageHeight + 'px' }"
  >
    <view
      class="package Toporder"
      style="position: relative;"
      v-for="(item,index) in shopAll" :key='index'
      @click="current === 0 ? '' : navTo('Sale/takeaway/orderDetail?id='+item.id)"
    >
      <view class="">{{item.time?item.time:'今天'}}之内加注</view>
      <view class="space-between">
        <view>尾气净化液</view>
        <view>
          <text>{{item.amount}}</text>
          <text style="font-size: 26rpx;">公斤</text>
        </view>
      </view>
      <view class="space-between">
        <view>
          <text>{{item.driver_name}}</text>
          <text style="color: #1B91FF;margin-left: 5rpx;">{{item.driver_mobile}}</text>
        </view>
        <view>{{item.cart_code}}</view>
      </view>
      <view style="margin-top: 5rpx;">{{item.address}}</view>
      <view style="margin-top: 5rpx;" v-if="current !== 0">{{item.plug_name}}已接单</view>
      <view v-if="current === 0" class="rob" @click="robFill(item.id)">抢代理加注订单</view>
      <view class="but success" v-if="current === 2">已完成</view>
      <view class="but new" v-if="current === 0">新任务</view>
      <view class="but wait" v-if="current === 1">待加注</view>
    </view>
    <Popu v-if="shopAll.length<1" :pageHeight="pageHeight" text="暂无订单记录"></Popu>
  </scroll-view>
</template>

<script setup lang="ts">
import { navBack, navTo } from '@/utils/navigator';
import { onLoad ,onShow} from '@dcloudio/uni-app';
import { getOrderList } from '@/gql/archives';
import { errorToast, successToast } from '@/utils/prompt';
import { toPublish } from '@mqtt';
import Popu from '@c/earthPushing/common/popu.vue';
import { getDriverID } from '@/stores/driverID';
import { ref } from 'vue';
const user_id = getDriverID();
const items = ['新任务', '待加注', '已完成'];
const current = ref(0);
const stage = [{ name: '我的任务', value: '1' }, { name: '我发起的', value: '1' }, { name: '团队任务', value: '1' }];
const level = ref(0);

const isLoading = ref(false);
const lastPage = ref(1);
const currentPage = ref(1);
const shopAll = ref([]);
const pageHeight = ref('');
const mouHeight = ref('');

const act=ref(0)
onLoad((pearm) => {
  // act.value=Number(pearm.act)
  // current.value = Number(pearm.act);
  uni.getSystemInfo({
    success: function(res) {
      pageHeight.value = (res.windowHeight - 110).toString();
      mouHeight.value = (res.windowHeight - 150).toString();
    },
  });
  // init();
});
onShow(()=>{
  current.value=act.value
  shopAll.value=[]
  currentPage.value=1
  init();
})
function init() {
  const is_get=current.value === 0 ? 0 : 1;
  const plug_id = level.value == 0 && current.value === 1 ||current.value === 2? user_id : 0;
  const status = current.value === 2 ? 1 : 0;
  const fa_plug_id = level.value == 1 && current.value === 1 ? 1 : 0;
  const plug_team_id = level.value == 2 && current.value === 1 ? 1 : 0;
  var payload = {
    query: getOrderList,
    variables: {
      is_get,
      plug_id,
      page: currentPage.value,
      status,
      fa_plug_id,
      plug_team_id,
    },
  };
  toPublish('ql/take/getOrderList', payload, (obj: any) => {
    const { getOrderListByPlug } = obj.data;
    isLoading.value = false;
    shopAll.value = [...shopAll.value, ...getOrderListByPlug.list];
    lastPage.value = getOrderListByPlug.lastpage;
  });
}
/**
 * 加载更多
 */
function loadMore() {
  if (currentPage.value < lastPage.value) {
    currentPage.value++;
    init();
  }
}
/**
 * @param {Object} e 订单分类状态
 */
function onClickItem(e:any) {
  current.value = e.currentIndex;
  shopAll.value=[]
  currentPage.value=1
  init()
}
/**
 * @param {Object} index 待加注索引选中
 */
function ChangeTab(index:number) {
  level.value = index;
  shopAll.value=[]
  currentPage.value=1
  init()
}
/**
 * 抢代理加注订单
 */
function robFill(id:number) {
  var payloads = {
      order_id:id,
      plug_id:user_id
  };
  toPublish('plug/updatePlug', payloads, (obj: any) => {
    const { code,msg} = obj;
     if(code===1){
       successToast(msg)
       shopAll.value=[]
       currentPage.value=1
       init()
     }else{
       errorToast(msg)
     }
  });
}
</script>

<style scoped lang="less">
.space-between {
  margin-top: 5rpx;
}
.but {
  position: absolute;
  padding: 2rpx 10rpx;
  box-sizing: border-box;
  top: 0px;
  right: 0px;
  border-bottom-left-radius: 5px;
  border-top-right-radius: 5px;
  font-size: 28rpx;
}
.success {
  background-color: #d8d8d8;
  color: #333;
}
.new {
  background-color: #fff1db;
  color: #fd9b00;
}
.wait {
  background-color: #dbeeff;
  color: #1b91ff;
}
.center {
  text {
    padding: 3rpx 10rpx 5rpx;
    box-sizing: border-box;
    background: #dddddd;
    border-radius: 2px;
  }
  .active {
    color: #1b91ff;
    background: #deefff;
  }
}
.rob {
  margin-top: 5rpx;
  width: 496rpx;
  height: 84rpx;
  box-shadow: 1px 2px 4px 0px rgba(204, 204, 204, 0.5);
  border-radius: 5px;
  border: 2px solid #fd9b00;
  color: #fd9b00;
  font-size: 36rpx;
  text-align: center;
  line-height: 84rpx;
  margin: 40rpx auto 20rpx;
}
.Toporder:nth-of-type(1) {
  margin-top: 0px;
}
.fillings {
  image {
    width: 350rpx;
    height: 300rpx;
  }
  text {
    font-size: 32rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #666;
    margin-top: 50rpx;
  }
}
</style>
<style>
.package >>> .segmented-control__text {
  border-bottom-style: solid;
  border-bottom-width: 0px;
  padding: 4px 0;
}
</style>
